<template>
  <div>
    <ul>
      <li v-for="u in user" :key="u.name">{{ u }}</li>
    </ul>
    <el-button @click="getUser">从mysql获取用户</el-button>
    <el-button @click="ajax">请求原生ajax</el-button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState({
    user: (state) => state.user.user,
  }),
  methods: {
    getUser() {
      this.$store.dispatch("user/getUser");
    },
    ajax() {
      let xhr = new XMLHttpRequest();
      xhr.__myid = "0000000001";
      xhr.open("GET", "/api/users/rows", true);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          let response = JSON.parse(xhr.responseText);
          // 处理响应数据
          console.log("response", response);
        }
      };
      xhr.send();
    },
  },
  created() {
    this.getUser();
  },
};
</script>